<template>
  <div>
    <van-form @submit="onSubmit">
      <van-nav-bar class="my-nav-bar" title="请登陆账户" />
      <!-- name="username" 加上后 方便在控制台打印出来看数据 -->
      <!-- 6月21号----------------------6月21号---- -->
      <!-- 将 v-model="username" name="username" 改成了 v-model="mobile" name="mobile"-->
      <!-- 修改的是 login.js方法里面的请求参数   验证码栏的cde也需要改-->
      <van-field
        v-model="mobile"
        name="mobile"
        required
        label="手机号"
        placeholder="请输入手机号"
        :rules="[
          { required: true, message: '请输入正确的手机号码' },
          {
            pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
            message: '手机号码格式错误'
          }
        ]"
      />
      <!-- required: true, message: '请填写验证码' }这是非空判断 -->
      <!-- { pattern: /\d{6}/, message: '验证码格式错误' }这是正则判断 -->
      <van-field
        v-model="code"
        name="code"
        required
        label="验证码"
        placeholder="验证码"
        :rules="[
          { required: true, message: '请填写验证码' },
          { pattern: /\d{6}/, message: '验证码格式错误' }
        ]"
      />
      <div style="margin: 16px;">
        <!-- 6月21号改 :disabled="isdisabled" :loading="isloading" ----------------- -->
        <!-- :disabled="isdisabled" 是否禁用按钮 -->
        <!-- :loading="isloading" 是否显示为加载状态 -->
        <!-- loading-text="加载中..." 加载状态提示文字 -->
        <van-button
          :disabled="isdisabled"
          :loading="isloading"
          loading-text="加载中..."
          round
          block
          type="info"
          native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
// -------------6月21号----------------6月21号-------------
// 导入 api 文件夹里面 login.js 里面的 方法
import { userLogin } from '../../api/login.js'
// 导入 utils 文件夹里面的 token.js 工具函数 (用来保存用户登陆成功后的token数据)
import { saveToken } from '../../utils/token.js'

export default {
  anme: 'login',
  created () {
    // console.log('userLogin', userLogin)
    // 这是一个方法所以需要加() 在控制台能打印取出的数据
    // console.log(getToken())
    // 开启后会自动删除保存的token数据
    // removeToken()
  },
  data () {
    //  6月21号 --------------------6月21号
    return {
      // 手机号码和验证码 login.js里面的请求参数
      mobile: '18679148210',
      code: '246810',
      isdisabled: false,
      isloading: false
    }
  },
  methods: {
    onSubmit (values) {
      // values 是一个对象
      // key 是表单中输入元素的name属性
      // 3. 表单校验通过之后会触发的回调函数
      // 所以点击提交后打印出 提交按钮 里面的(native-type="submit")
      // 手机号码的 username: "158",  验证码的 password: "123"
      console.log('submit', values)
      // 6月21号---------------------------6月21号
      // 登陆前加载动画
      this.isdisabled = true
      this.isloading = true
      userLogin(values)
        .then(res => {
          console.log('res', res)
          this.$toast.success('登陆成功')
          // 登陆成功关闭动画
          this.isdisabled = false
          this.isloading = false
          // 这是 原生写法(效果和下面这句代码一样)
          // 为了保存存和取的key一样 'heima-toutiao-token' 这个单词用复制
          // 如果在多个文件都用这个字符串,所以修改起来不方便(所以用下面的工具函数)
          // localStorage.setItem(
          //   'heima-toutiao-token',
          //   JSON.stringify(res.data.data)
          // )
          // 这是工具函数写法
          // 这里用的是 utils 文件夹里面的token.js里面的方法保存的
          // 保存的是 登陆成功后 res 里面的data里面data的token数据
          // (用来保存用登陆成功后的token,数据保存在控制台的 Application里面)
          saveToken(res.data.data)
          // 登陆成功跳转到首页(/home.vue页面)
          // 得到 $route 里面query.back: "/my"
          console.log('$route', this.$route)
          if (this.$route.query.back) {
            // 6月24号修改 原路返回 登陆成功根据 url中的 back 决定返回到哪一个页面 6月24号修改-----------
            // 由router里面index.js里面 return next({ path: '/login', query: { back: to.path } }) url携带back参数, 记录之前访问的地址
            // 这里就能获取到之前的 访问地址(之前的访问地址 this.$route.query.back  上面打印出来是my)
            this.$router.push({ path: this.$route.query.back })
          } else {
            // 如果携带back参数 没有记录之前访问的地址 那么就到首页 home 页面 (就是没有this.$route.query.back query是空的 )
            // 如果网址进去login就获取不到query的值
            this.$router.push({ path: '/home' })
          }
        })
        //   验证码错误这句代码this.$toast.fail('验证码错误!') 改掉code请求的参数后才有提示(246810改成246811) 如果是删除一个数字就等于请求不到,那么改代码不会执行
        .catch(errRes => {
          // console.log('errRes', errRes)
          this.$toast.fail('验证码错误!')
          this.isdisabled = false
          this.isloading = false
        })
    }
  }
}
</script>

<style lang="less">
/* .van-nav-bar 是自带有的类名
   .my-nav-bar自己定义的
   如果用自己定义的出现不了效果
   那么久加上一个自带的,这样权重就更大
 */
//  建议用  lang="less"去写css样式
// .van-nav-bar.my-nav-bar {
//   background-color: #026bf4;
//   .van-nav-bar__title {
//     color: #fff;
//   }
// }
// 交集选择器
.van-nav-bar.my-nav-bar {
  background-color: #026bf4;
}
// 子代选择器(由一个空格)
.my-nav-bar .van-nav-bar__title {
  color: #fff;
}
.van-field {
  border: 1px solid #ccc;
  margin-bottom: -1px;
}
</style>

// 手机JS正则表达式验证1 { pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, message:
'手机号码格式错误' } //2
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
